<template>
  <el-container class="release_container">
    <el-form ref="form" :model="form" label-width="100px">
      <el-form-item label="我的名字">
        <el-input v-model="form.name" placeholder="请填您的名字"></el-input>
      </el-form-item>
      <el-form-item label="我的头像">
      </el-form-item>
      <el-upload
        class="avatar-uploader"
        action="https://jsonplaceholder.typicode.com/posts/"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-form-item label="我的性别">
        <el-col :span="11">
          <el-select placeholder="请选择您的性别" v-model="form.sex" style="width: 250px;">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
            <el-option label="不愿透露" value="不愿透露"></el-option>
          </el-select>
        </el-col>
      </el-form-item>
      <el-form-item label="我的年龄">
        <el-input v-model="form.age" placeholder="请填写年龄"></el-input>
      </el-form-item>
      <el-form-item label="我的电话号码">
        <el-input v-model="form.tel" placeholder="请填写电话号码"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交信息</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-container>
</template>
  

<script>
  export default {
    data() {
      return {
        form: {
          id: '',
          name: '',
          sex: '',
          age: '',
          tel: '',
        },
        imageUrl: ''
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
        let self = this
        
        console.log(this.imageUrl) 

        let param = {
          id : localStorage.getItem("id"),
          name : this.form.name,
          photo: this.imageUrl,
          sex : this.form.sex,
          age : this.form.age,
          tel : this.form.tel
        }
        
        console.log(this.imageUrl)
        console.log(localStorage.getItem("id"))

        let config = {
          headers: {'Content-Type': 'application/json','Authorization':localStorage.getItem("token")}
        }

        // 添加请求头
        this.$axios.put('/user', param, config)
        .then(function (response) {
        // handle success
          console.log(response);
        })
        .catch(function (error) {
        // handle error
          console.log(error);
        })
        .then(function () {
        // always executed
          
        });
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log('图片路径1'+this.imageUrl)
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        console.log('图片路径2'+file)
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        }
    }
  }      
</script>

<style lang="less" scoped>
.release_container {
  height: 100%;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>